<html window-frame="extended" window-blurbehind="dark" resizeable>
  <head>
    <title>Sciter IDE</title>
    <style >
      @import url(styles/main.css);
      @import url(colorizer/colorizer.css);
    </style>
    <script type="text/tiscript">
      include "widgets/tree-data-source.tis";
      
      function self.ready() {
        const folderView = $(widget#tree);
        const editor = $(plaintext#editor);
      
        var thisPath = self.url() /~ "/";
        folderView.dataSource = new TreeDataSource(thisPath);
            
        folderView.on("~mousedown", "option[filename]", function() {
          var fn = this.attributes["filename"];
          var str = self.request(0,#get,"file://" + fn);
          editor.load(str.toString(), "text/" +(fn %~ ".") );
          str.close();
        });
      }
    </script>
    <include src="fonts/font-awesome.inc.htm" />
  </head>
<body>
  <header id="window">
    <menubar><include src="menu.htm"/></menubar>   
    <caption role="window-caption">editor caption</caption> 
    <chrome-button.min   role="window-minimize"></chrome-button> 
    <chrome-button.max   role="window-maximize"></chrome-button> 
    <chrome-button.close role="window-close"></chrome-button> 
  </header>
  
  <main>
    <frameset cols="200dip,*">
      <widget type="tree" id="tree" />
      <splitter/>
      <section id="content">
        <plaintext id="editor" type="html" />
        <toolbar id="content-bar"></toolbar>
      </section>
    </frameset>
    <toolbar id="sidebar">
      <button>&fa-play-circle;</button>
      <button>&fa-gear;</button>
      <button>&fa-print;</button>
    </toolbar>
  </main>
</body>
</html>
